<template>
    <div style="padding-top: 20px;">
        <SearchForm v-model="productList" @getPage="getPage"></SearchForm>
        <el-button type="primary" size="small" @click="addProduct">添加商品</el-button>
        <DialogProduct ref="setProductRef"></DialogProduct>
        <el-table :data="productList" border style="width: 100%">
            <el-table-column fixed prop="product_title" label="名称" width="120">
            </el-table-column>
            <el-table-column prop="product_price" label="价格" width="120">
            </el-table-column>
            <el-table-column prop="product_dics" label="描述">
            </el-table-column>
            <el-table-column label="图片" width="200">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.prudout_img"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="reatec_time" label="创建时间" width="180">
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleEidt(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
    </div>
</template>
<script>
    import { insertProduct, getProduct, delProduct, upProduct,pageProduct } from '@/api/product.js'
    import DialogProduct from './components/DialogProduct.vue'
    import SearchForm from './components/SearchForm.vue'
    export default {
        components: {
            DialogProduct,
            SearchForm
        },
        data() {
            return {
                form: {
                    product_title: '',
                    product_price: '',
                    prudout_img: '',
                    product_dics: ''
                },
                productList: [],
                
                page:{
                    currentPage: 1,
                    pageSize: 5,
                    total: 400
                }
            }
        },
        mounted() {
            this.pruductInit()
        },
        methods: {
            pruductInit() { // 初始化商品
                let params = {
                    currentPage: Number(this.page.currentPage),
                    pageSize: Number(this.page.pageSize),
                }
                getProduct(params).then(res => {
                    this.productList = res.data.data
                    this.page = res.data.page
                }).catch(err => {
                    console.log('失败：', err)
                })
            },
            addProduct() { // 打开添加商品弹框
                this.$refs.setProductRef.showDialog({ type: 'add' })
            },
            handleEidt(rowData) {
                let modifyData = Object.assign({}, rowData)
                this.$refs.setProductRef.showDialog({ type: 'edit', rowData: modifyData })
            },
            handleDel(rowData) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    delProduct(rowData).then(res => {
                        this.pruductInit()
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        });
                    }).catch(err => {
                        console.log('失败：', err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },

            handleSizeChange(val) { // 切换页码大小
                console.log(`每页 ${val} 条`);
                console.log('当前页码：',this.page.currentPage)
                let page = {
                    currentPage: Number(this.page.currentPage),
                    pageSize: Number(val),
                }
               this.initPage(page)
            },
            handleCurrentChange(val) { // 当前页码
                console.log(`当前页: ${val}`);
                let page = {
                    currentPage: Number(val),
                    pageSize: Number(this.page.pageSize),
                }
               this.initPage(page)
            },
            initPage(page){
                pageProduct(page).then(res =>{
                    console.log("分页数据：",res)
                    this.productList = res.data.data
                    this.page = res.data.page
                }).catch(err => {
                    console.log('分页错误：',err)
                })
            },
            getPage(params){
                this.page = params
                // console.log("分页：",this.page)
            }
        }
    }
</script>